<template>
	<view>
		
		<ul class="content">
			<li class="goods_item" v-for="(item,index) in goodsList" :key="index" @click="tapGoodsItem(item)">
				<view class="goods_img_box">
					<view class="goods_shadow"></view>
					<view class="goods_triangle">
						
					</view>
					<image :src="item.image" class="goods_img" mode="scaleToFill"></image>
				</view>

				<view class="goods_item_name">
					<span class="goods_item_name_code">{{item.code}}</span>
					<sapn class="goods_item_name_price">{{item.add_price ?"+"+item.add_price+"元":""}}</sapn>
				</view>

			</li>
			
		</ul>
		<u-popup class="uPop_up" v-model="showFitting" mode="top" length="auto"  :mask-custom-style="{background: 'rgba(0, 0, 0, 0)'}">
				<fitting-room :goodsDetail="goodsDetail" @closeFitting="closeFitting" @showGoodsDetail="showGoodsDetail"></fitting-room>
			</u-popup>
		<!-- <FittingRoom :goodsDetail="goodsDetail"></FittingRoom> -->
	</view>
</template>

<script>
	import FittingRoom from '@/pages/bundle/fitting-room/fitting-room.vue';
	export default {
		props:['goodsList'],
		components:{
			FittingRoom
		},
		data() {
			return {
			goodsDetail:null,
			showFitting:false
			};
		},
		methods:{
			tapGoodsItem(item){
				this.goodsDetail = item;
				this.showFitting = true;
				console.log(item,'+++')
			},
			//接收子组件关闭试衣组件功能事件
			closeFitting(){
				this.showFitting = false;
			},
			showGoodsDetail(goodsDetail){
				this.showFitting = false;
				console.log("父组件接收showGoodsDetail事件")
				// this.isShowGoodsDetail = true;
				// this.goodsDetailPageData = goodsDetail;
				uni.navigateTo({
					url: `/pages/goods_details/goods_details?id=${goodsDetail.id}`
				});
				console.log(goodsDetail);
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep  .u-drawer-top.data-v-67a9dfc6 {

		
			background-color:transparent !important;
			
		}
		
	// 	::v-deep .uPop_up .u-mask-show {
	// 		/* opacity: 0.5 !important; */
	// 		opacity: 1 !important;
	// }
	
	.content {
		/* background-color: rgb(232, 9, 9); */
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 20rpx 0;
		display: flex;
		/* 主轴横向 */
		flex-direction: row;
		/* 主轴对齐： 靠左对齐*/
		justify-content: flex-start;
		/* 容器满则换行 */
		flex-wrap: wrap;

		.goods_item {
			/* background-color: rgb(5, 248, 21); */
			list-style: none;
			width: 250rpx;
			height: 200rpx;
			margin: 10rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.goods_img_box {
				position: relative;

				width: 200rpx;
				height: 130rpx;
				// overflow: hidden;
				// border-radius: 10%;
				
				.goods_shadow {
					position: absolute;
					top: 0;
					left: 0;
					background: transparent;
					width: 100%;
					height: 100%;
					overflow: hidden;
					// border-radius: 50%;
					box-shadow: inset 3rpx 3rpx 5rpx #818283, inset -3rpx -3rpx 5rpx #ffffff;
					// box-shadow: inset 0rpx 0rpx 0rpx #fff, inset -3rpx -3rpx 5rpx #ffffff;
					border-radius: 10%;
					// overflow: hidden;
				}
				.goods_triangle{
							width:0rpx;
					        height:0rpx;
							position: absolute;
							bottom: 0;
							right: -40rpx;
							
					        border:40rpx solid transparent;/*以下四个样式对应四种三角形，任选其一即可实现*/
					        /* border-top-color:lightseagreen; */
					        /* border-left-color:lightseagreen; */
					        /* border-right-color:lightseagreen; */
					        border-bottom-color:#FFFFFF;
							
				}

				.goods_img {
					width: 100%;
					height: 100%;
					// border-radius: 50%;
					border-radius: 10%;
					overflow: hidden;
					
				}
			}

			.goods_item_name {
				width: 100%;
				height: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				/*强制文本在一行内显示*/
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				.goods_item_name_code {
					font-size: 22rpx;
					color: #000;

				}

				.goods_item_name_price {
					font-size: 26rpx;
					color: red;

				}

			}

		}
	}
</style>